<template>
  <div>
    <el-dialog width="65%" title="广告详情" style="padding: 30px 20px;" :visible.sync="dialogFormVisible">
      <el-form :model="addAdList"  :rules="rules" ref="ruleForm" :label-width="formLabelWidth" label-position="right">
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="广告名称" prop="name" >
              <el-input style="width:80%;" size="mini" v-model="addAdList.name" placeholder="广告名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input style="width:80%;" size="mini" v-model="addAdList.note" placeholder="备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="排序" prop="name" >
              <el-input style="width:80%;" size="mini" v-model="addAdList.sort" placeholder="排序"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品数量">
              <el-input style="width:80%;" size="mini" v-model="addAdList.orderCount" placeholder="产品数量"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="链接" prop="name" >
              <el-input style="width:80%;" size="mini" v-model="addAdList.url" placeholder="链接"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="首页轮播位置">
              <el-select v-model="addAdList.type" placeholder="请选择">
              <el-option
                  label="app首页轮播"
                  value=0>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="开始时间" prop="name" >
              <el-date-picker
                v-model="addAdList.startTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="addAdList.endTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="上下线状态" prop="name" >
              <el-switch
                v-model="addAdList.status"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图片">
              <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :headers="uploadHeader"
                  :show-file-list="false"
                  :on-success="uploadPic"
                  >
                  <img v-if="addAdList.pic" :src="addAdList.pic" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAdForm">确 定</el-button>
      </div>
    </el-dialog>



  <el-card>
    <div slot="header">
      <el-button type="primary" @click="newAdList" size="mini">新增</el-button>
    </div>

      <el-table
        :data="list"
        border
        style="width: 100%">
        <el-table-column
          fixed
          type="index"
          label="#"
          align="center"
          width="50">
        </el-table-column>

        <el-table-column
          label="广告图片"
          align="center"
          width="220">
          <template slot-scope="scope">
            <img style="width:100px;height:100px;" :src="scope.row.pic" alt="">
          </template>
        </el-table-column>

        <el-table-column
          prop="province"
          align="center"
          label="时间"
          width="260">
          <template slot-scope="scope">
            <div>开始时间{{scope.row.startTime}}</div>
            <div>结束时间{{scope.row.endTime}}</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="name"
          label="广告名称"
          align="center"
          width="260">
        </el-table-column>

        <el-table-column
          prop="clickCount"
          align="center"
          label="点击数"
          width="150">
        </el-table-column>

        <el-table-column
          prop="orderCount"
          align="center"
          label="下单数"
          width="150">
        </el-table-column>

        <el-table-column
          label="轮播位置"
          align="center"
          width="150">
          <template slot-scope="scope">
            <div>首页轮播</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="url"
          label="链接地址"
          align="center"
          width="150">
        </el-table-column>

        <el-table-column
          prop="note"
          label="备注"
          align="center"
          width="150">
        </el-table-column>

        <el-table-column
          prop="state"
          label="上下线状态"
          align="center"
          width="150">
        </el-table-column>
        
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="100">
          <template slot-scope="scope">
            <el-button @click="editAd(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" style="color:red;" @click='delAdList(scope.row.id)' size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  </el-card>
  </div>
</template>

<script>
import {adsList,delAds,addAds,updateAds} from '@/api/market/ad';
import mixin from '@/mixins/index';
export default {
  mixins:[mixin],
  data(){
    return{
      //获取广告列表
      list:[],
      //新增广告列表
      addAdList:{},
      formLabelWidth:"150px",
      dialogFormVisible:false,
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],
      }
    }
  },
  created(){
    this.getData()
  },
  methods:{
    //获取广告列表
    getData(){
      adsList().then(res=>{
        res.data.items = res.data.items.forEach(val => {
          if(val.status==0){
            val.state="下线"
          }else{
            val.state="上线"
          }
          this.list = res.data.items
          console.log(this.list);
        });
        
      })
    },
    //删除列表
    delAdList(val){
      delAds(val).then(res=>{
        if(res.success){
          this.$message.success("删除成功")
          this.getData()
        }
      })
    },
    //新增广告弹窗
    newAdList(){
      this.dialogFormVisible = true
    },
    //新增广告确认按钮
    addAdForm(){
      if(this.addAdList.id){
        updateAds(this.addAdList).then(res=>{
          if(res.success){
            console.log(res);
            this.$message.success("编辑成功")
            this.dialogFormVisible=false
            this.addAdList={}
            this.getData()
          }else{
            this.$message.success("编辑失败")
          }
        })
      }else{
        addAds(this.addAdList).then(res=>{
          if(res.success){
            console.log(res);
            this.$message.success("新增成功")
            this.dialogFormVisible=false
            this.addAdList={}
            this.getData()
          }else{
            this.$message.success("新增失败")
          }
        })
      }
      
    },
    //上传图片成功的回调函数
    uploadPic(res,file){
      this.addAdList.pic=res.data.fileUrl
    },
    //编辑广告列表
    editAd(val){
      this.dialogFormVisible=true
      this.addAdList=val
    }
  }
}
</script>

<style lang="scss" scoped>
// 上传图片样式
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>